<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="./style.css" rel="stylesheet" />
  </head>

  <body>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script type="importmap">
      {
        "imports": {
          "vue": "https://unpkg.com/vue@3.2.31/dist/vue.esm-browser.js"
        }
      }
    </script>

    <!--
https://eugenkiss.github.io/7guis/tasks/#cells
-->

    <script type="module">
      import { createApp } from "vue";
      import Cell from "./Cell.js";
      import { cells } from "./store.js";

      createApp({
        components: {
          Cell,
        },
        setup() {
          // A, B, C, D ...
          const cols = cells.map((_, i) => String.fromCharCode(65 + i));
          return {
            cols,
            cells,
          };
        },
      }).mount("#app");
    </script>

    <div id="app">
      <table>
        <thead>
          <tr>
            <th></th>
            <th v-for="c in cols">{{ c }}</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="i in cells[0].length">
            <th>{{ i - 1 }}</th>
            <td v-for="(c, j) in cols">
              <cell :r="i - 1" :c="j"></cell>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
